<template>
  <div class="button">
    <el-row>
      <el-button type="primary" >按钮</el-button>
      <el-button type="success" >按钮</el-button>
      <el-button type="danger" >按钮</el-button>
      <el-button type="warning" >按钮</el-button>
      <el-button type="info" >按钮</el-button>
    </el-row>

    <br>
<!--  -->
    <el-row>
      <el-button type="primary" plain>按钮</el-button><!-- plain:镂空效果 -->
      <el-button type="success" plain round>按钮</el-button><!-- round:实现椭圆 -->
      <el-button type="danger" plain circle>按钮</el-button><!-- circle:实现圆 -->
      <el-button type="warning" plain>按钮</el-button>
      <el-button type="info" plain disabled>按钮</el-button><!-- disabled:禁用 -->
      <el-button type="text">按钮</el-button> <!-- type="text":将button换成纯文本按钮 -->
      <el-button class="el-icon-s-comment"></el-button>
    </el-row>

    <br>

    <el-row>
      <el-button-group>
        <el-button class="el-icon-arrow-left" type="primary">上一页</el-button>
        <el-button type="primary">下一页<i class="el-icon-arrow-right" /></el-button>
      </el-button-group>
    </el-row>

    <br>

    <el-row>
      <el-button type="primary" :loading="true">加载</el-button>
    </el-row>

    <br>

    <!-- size="small的三种属性" -->
    <el-row>
      <el-button type="primary" size="mini">按钮</el-button>
    </el-row>
    
  </div>
</template>

<script>
  export default {
    name: "Button"
  }
</script>

<style scope>

</style>